
<template>
<!-- 
Cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
v-model="value"
:options="options"
@change="handleChange"
 -->
<div>
    <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
</div>
</template>



<script>
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() { 
//这里存放数据
return {
    value:[],//级联组件选中的数据
    options:[
        {
            value:"1",
            label:"湖南省",
            children:[
              {
                value:"1-1",
                label:"长沙市",
                children:[
                    {
                        value:"1-1-1",
                        label:"浏阳市"
                    },
                    {
                        value:"1-1-2",
                        label:"长沙县"
                    },
                    {
                        value:"1-1-3",
                        label:"宁乡市"
                    }
                ]
              },
              {
                  value:"1-2",
                  label:"怀化市",
                  children:[
                      {
                          value:"1-2-1",
                          label:"鹤城区"
                      }
                  ]
              },
              {
                  value:"1-3",
                  label:"岳阳市",
                  children:[
                      {
                          value:"1-3-1",
                          label:"云溪区"
                      }
                  ]
              }
            ]
        },
        {
            value:"2",
            label:"广东省",
            children:[
                {
                    value:"2-1",
                    label:"深圳市",
                    children:[
                        {
                            value:"2-1-1",
                            label:"宝安区"
                        },
                        {
                            value:"2-1-2",
                            label:"罗湖区"
                        },
                        {
                            value:"2-1-3",
                            label:"南山区"
                        },
                        {
                            value:"2-1-4",
                            label:"坪山区"
                        },
                    ]
                },
                {
                    value:"2-2",
                    label:"广州市",
                    children:[
                        {
                            value:"2-2-1",
                            label:"黄浦区"
                        },
                        {
                            value:"2-2-2",
                            label:"白云区"
                        },
                        {
                            value:"2-2-3",
                            label:"荔湾区"
                        },
                    ]
                }
            ]
        }
    ]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    handleChange:function(values){
      console.log("现在选中的数据是",values);
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>

<style lang="less" scoped>
</style>